<template>
	<view class="home">
		<base-navbar back-color="#fff" :is-back="false">
			<template #back>
				<view class="nav-location">
					<view class="location-content">
						<uni-icons type="location" size="20"></uni-icons>
						<text class="value">{{location.street}}</text>
					</view>
				</view>
			</template>
			<template #content>
				<view class="actions">
					<view class="actions-item" @click="pageRoute('/pages/service/notice/notice-center')">
						<uni-badge class="uni-badge-left-margin" :text="noticeTotalNum" absolute="rightTop"
							:offset="[3, 12]">
							<uni-icons type="icon-chat" custom-prefix="iconfont"></uni-icons>
						</uni-badge>
					</view>
				</view>
			</template>
		</base-navbar>

		<view class="content">
			<c-swiper :list="bannerList" height="320" v-if="bannerList.length>0"></c-swiper>
			<pagination-menu :list="menuList" v-if="menuList.length>0"></pagination-menu>
			<view class="goods-seckill-list">
				<goods-seckill-item v-for="(item,index) in goodsList" :goods="item" :key="index"></goods-seckill-item>
			</view>
			<view class="project">
				<store-item v-for="(item, index) in storeList" :store="item" :key="index"></store-item>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		statusBarHeight: 0,
		bannerList: [],
		menuList: [],
		goodsList: [],
		storeList: [],
		isMore: false,
		noticeTotalNum: 0,
		location: {
			province: '定位中...',
			city: '定位中...',
			area: '定位中...',
			town: '定位中...',
			street: '定位中...',
			address: '',
			areaCode: '',
		}, // 定位信息,
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('invite_code')) {
			cache.set('invite_code', opt.invite_code);
		}
		getBannerList();
		getMenuList();
		getGoodsList();
		getStoreList();
		getPosition();
		getNoticeTotalNum();
	});

	onShow(() => {});

	onReady(() => {
		uni.getSystemInfo({
			success: function(info) {
				console.log('状态栏的高度：' + info.statusBarHeight);
				state.statusBarHeight = info.statusBarHeight;
			}
		});
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
		/* if (state.isMore) {
			getStoreList();
		} */
	});

	function getBannerList() {
		request.get('index/banner').then(res => {
			console.log('Banner', res);
			/* res.data.forEach((item, index) => {
				state.bannerList.push(item.image);
			}) */
			state.bannerList = res.data;
		})
	}

	function getMenuList() {
		request.get('index/menu').then(res => {
			console.log('Menu', res);
			state.menuList = res.data;
		})
	}

	function getGoodsList() {
		request.get('goods/list', {
			category_id: 2,
			skip: state.goodsList.length,
			limit: 20,
		}).then(res => {
			console.log('Goods', res);
			state.isMore = res.data.is_more;
			if (state.goodsList.length == 0) {
				state.goodsList = res.data.data;
			} else {
				state.goodsList.concat(res.data.data);
			}
		})
	}

	function getStoreList() {
		request.get('store/list', {
			skip: state.storeList.length,
			longitude: cache.get('longitude'),
			latitude: cache.get('latitude'),
		}).then(res => {
			console.log('Store', res);
			state.isMore = res.data.is_more;
			if (state.storeList.length == 0) {
				state.storeList = res.data.data;
			} else {
				state.storeList.concat(res.data.data);
			}
		})
	}

	function getPosition() {
		request.get('amapaddress/regeo', {
			longitude: cache.get('longitude') || '',
			latitude: cache.get('latitude') || '',
		}).then(res => {
			// console.log('地址逆解析', res);
			state.location = res.data;
		});
	}

	function getNoticeTotalNum() {
		request.get('content/getNoticeTotalNum').then(res => {
			console.log('未读消息', res);
			state.noticeTotalNum = res.data;
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		statusBarHeight,
		bannerList,
		menuList,
		goodsList,
		storeList,
		isMore,
		noticeTotalNum,
		location,
	} = toRefs(state);
</script>

<style lang="scss">
	.home {
		.nav-location {
			display: flex;
			align-items: center;

			.location-content {
				display: flex;
				align-items: center;
				max-width: 320rpx;

				.value {
					@include ellipsis;
					color: $main-color;
					font-size: $font-28;
				}
			}
		}

		.actions {
			@include f-center;
			padding: 0 $margin-12;

			.actions-item {
				@include f-center($direction: column);
				position: relative;
				padding: 0 $margin-12;

				.label {
					font-size: $font-20;
					color: $main-color;
				}
			}
		}

		.content {
			// padding: $margin-24;

			.goods-seckill-list {
				// margin-top: $margin-24;
				overflow: hidden;
				padding: 0 $margin-24;
				background-color: $bg-inverse-color;
			}

			.project {
				overflow: hidden;
				margin-top: $margin-24;
				background-color: $bg-inverse-color;
				border-radius: $radius-12;
				// margin-bottom: 240rpx;
				padding-bottom: 120rpx;
			}
		}
	}
</style>